body {
   height: 100vh;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   background-color: rgb(245, 246, 247);
   .trp {
      .Creative_head {
         width: 100%;
         height: 48px;
         .Creative {
            padding: 0 24px;
            display: flex;
            justify-content: space-between;
            line-height: 48px;
            .left {
               width: 160px;
               height: 48px;
               display: flex;
               align-items: center;
               justify-content: space-between;
               a {
                  height: 48px;
               }
               img {
                  width: 80px;
                  height: 48px;
               }
            }
            .head_portrait {
               width: 132px;
               height: 48px;
               display: flex;
               align-items: center;
               padding-right: 20px;
               .head {
                  padding: 0 8px;
                  img {
                     display: block;
                     width: 32px;
                     height: 32px;
                     border-radius: 50%;
                  }
               }
               .portrait {
                  padding: 0 8px;
               }
            }
         }
      }
   }
   .btm {
      flex: 1;
      display: flex;
      height: 0;
      padding: 24px 0 0 0;
      .list {
         width: 242px;
         height: 100%;
         display: flex;
         flex-direction: column;

         .home_page {
            width: 300px;
            height: 40px;
            .createBtn {
               margin-left: 40px;
               z-index: 11;
               width: 175px;
               height: 40px;
               line-height: 40px;
               background: #fc5531;
               border-radius: 23px;
               font-size: 18px;
               font-weight: 600;
               color: #fff;
               text-align: center;
               a {
                  display: block;
                  width: 100%;
                  height: 1000%;
               }
            }
         }
         .list_page {
            &::-webkit-scrollbar {
               width: 0;
            }
            width: 205px;
            margin: 0 auto;
            flex: 1 40px;
            // background-color: blueviolet;
            margin-top: 24px;

            overflow-y: scroll;
            .hom {
               // width: 100%;

               display: flex;
               flex-direction: column;
               justify-self: start;
               color: #303133;
               .homefd {
                  margin-top: 16px;
                  .box {
                     line-height: 32px;
                     padding-left: 22px;
                     &.disi {
                        .ic2 {
                           transform: rotate(180deg);
                        }
                     }
                     &:hover {
                        background-color: #ededed;
                     }
                     cursor: pointer;
                     display: flex;
                     align-items: center;
                     span {
                        line-height: 40px;
                        flex: 1;
                     }
                     .iconfont {
                        font-size: 18px;
                        width: 22px;
                        height: 22px;
                        line-height: 22px;
                        margin-right: 8px;
                        color: inherit;
                        color: #909399;
                     }
                     .ic2 {
                        font-size: 12px;
                        transition: 0.3s;
                        text-align: center;
                        &::after {
                           content: "";
                        }
                     }
                  }
                  .submenu {
                     display: block;
                     font-size: 14px;
                     margin-top: 0;
                     margin-bottom: 0;
                     width: 100%;
                     line-height: 32px;
                     transition: height 0.3s ease-in-out;
                     overflow: hidden;
                     height: 0;
                     dd {
                        height: 32px;
                        display: block;
                        margin-top: 8px;
                        padding-left: 56px;
                        box-sizing: border-box;
                        a {
                           display: block;
                           width: 100%;
                           height: 100%;
                        }
                        &:hover {
                           background-color: #ededed;
                        }
                     }
                  }
               }
            }
         }
      }
      .main {
         flex: 1;
         height: 100%;
         overflow-y: auto;
         .console_home_box {
            width: 100%;
            height: 100%;
            display: flex;
            padding-right: 8px;
            box-sizing: border-box;
            .console_home_box_main {
               padding-right: 24px;
               flex: 1;
               .Observed-value {
                  box-sizing: border-box;
                  position: relative;
                  display: flex;
                  flex-direction: row;
                  width: 100%;
                  justify-content: space-around;
                  padding: 6px;
                  background: #fff;
                  margin-bottom: 24px;
                  z-index: 11;
                  border-radius: 2px;
                  .Observed {
                     width: 180px;
                     text-align: center;
                     cursor: pointer;
                     .Total-reading {
                        height: 20px;
                        font-size: 14px;
                        font-weight: 400;
                        color: #555666;
                        line-height: 20px;
                        margin-top: 16px;
                     }
                     .Fatal-Frame {
                        height: 35px;
                        font-size: 24px;
                        font-weight: 600;
                        color: #222226;
                        line-height: 35px;
                        margin: 12px 0;
                        &:hover {
                           color: #fc5531;
                        }
                     }
                     .yesterday {
                        padding: 0 12px;
                        height: 24px;
                        background: #f0f0f5;
                        border-radius: 12px;
                        font-size: 12px;
                        font-weight: 400;
                        color: #555666;
                        line-height: 24px;
                        margin-bottom: 16px;
                        display: inline-block;
                     }
                  }
               }
               .entrance {
                  box-sizing: border-box;
                  position: relative;
                  display: flex;
                  flex-direction: row;
                  width: 100%;
                  justify-content: space-around;
                  padding: 20px 6px;
                  background: #fff;
                  margin-bottom: 24px;
                  z-index: 11;
                  border-radius: 2px;
                  .observed {
                     width: 220px;
                     height: 50px;
                     display: flex;
                     border-radius: 4px;
                     justify-content: center;
                     border: 1px solid #ebeef5;
                     cursor: pointer;
                     transition: 0.3s;
                     &:hover {
                        background-color: #f7f7fc;
                        box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.1);
                     }
                     .content {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        justify-content: space-around;

                        img {
                           display: block;
                           width: 18px;
                           height: 18px;
                           margin-right: 8px;
                        }
                        .yepoterday {
                           height: 24px;
                           // background: #f0f0f5;
                           border-radius: 12px;
                           font-size: 12px;
                           font-family: PingFangSC-Regular, PingFang SC;
                           font-weight: 400;
                           color: #555666;
                           line-height: 24px;
                           display: inline-block;
                        }
                     }
                  }
               }
               .console_home_block_box {
                  width: 100%;
                  box-sizing: border-box;
                  background: #fff;
                  padding: 11px;
                  border-radius: 2px;
                  margin-bottom: 24px;
                  height: 400px;
                  .el-menu {
                     list-style: none;
                     position: relative;
                     margin: 0;
                     background-color: #fff;
                     display: flex;
                     .z {
                        flex: 1;
                     }
                     .more_click {
                        width: 56px;
                        height: 26px;
                        font-size: 14px;
                        font-weight: 400;
                        color: #6b6b6b;
                        line-height: 26px;
                        cursor: pointer;
                     }
                     .el-menu-item {
                        cursor: pointer;
                        height: 26px;
                        line-height: 26px;
                        color: #555666;
                        background-color: #fff !important;
                        font-size: 16px;
                        border: none;
                        padding: 0 10px;
                        .wl {
                           width: 24px;
                           height: 1px;
                           display: block;
                           margin: 8px auto 0;
                           border-bottom: 2px solid #222226;
                           visibility: hidden;
                        }
                        &.active {
                           .wl {
                              visibility: initial;
                           }
                        }
                     }
                  }
                  .console-home-body {
                     width: 100%;
                     height: 200px;
                     .console-home-body-list {
                        display: none;
                        padding: 16px;
                        padding-top: 24px;
                        .option {
                           display: flex;
                           color: #222227;
                           margin-bottom: 16px;
                           .type {
                              width: 30px;
                              padding-left: 8px;
                              .bk {
                                 padding: 0 2px;
                                 height: 20px;
                                 line-height: 20px;
                                 font-size: 12px;
                                 background: #fff;
                                 border-radius: 2px;
                                 color: #fc5531;
                                 border: 1px solid #fc5531;
                                 &::after {
                                    content: "博客";
                                 }
                              }
                           }
                           .title_abstract {
                              display: block;
                              padding-left: 16px;
                              width: 0;
                              flex: 1;
                              div {
                                 overflow: hidden;
                                 text-overflow: ellipsis;
                                 white-space: nowrap;
                              }
                              .title {
                                 // font-size: 18px;
                                 font-weight: bold;
                              }
                              .abstract {
                                 font-size: 14px;
                                 margin-top: 8px;
                              }
                           }
                           & > div {
                              height: 100%;
                           }
                           .info {
                              text-align: center;
                              width: 100px;
                              .text {
                                 font-weight: bold;
                                 font-size: 18px;
                              }
                              .dps {
                                 margin-top: 8px;
                                 font-size: 14px;
                                 color: #555666;
                              }
                           }
                        }
                     }
                     .poi {
                        display: none;
                     }
                  }
               }
            }
            .console_home_box_right {
               // padding-left: 12px;
               width: 24%;
               margin-right: 48px;
               // background-color: blue;
               .right-box {
                  padding: 24px;
                  margin-bottom: 24px;
                  background: #fff;
                  border-radius: 2px;
                  min-height: 22px;
                  overflow: hidden;
                  .title {
                     font-size: 16px;
                     color: #222226;
                  }
                  .bulletin-bnner {
                     background: #fff;
                     margin-bottom: -10px;
                     .bulletin {
                        margin: 10px auto;
                        font-size: 14px;
                        line-height: 40px;
                        display: flex;
                        flex-direction: column;
                        .bulletin-content {
                           display: flex;
                           align-items: center;
                           a {
                              width: 100%;
                              display: flex;
                              flex-wrap: nowrap;
                              white-space: nowrap;
                              line-height: 40px;
                              .date {
                                 margin-right: 8px;
                                 width: 43px;
                                 color: #555666;
                                 flex-shrink: 0;
                                 flex-grow: 0;
                              }
                              span {
                                 display: block;
                                 font-size: 14px;
                                 font-weight: 500;
                                 color: #222226;
                                 cursor: pointer;
                                 white-space: nowrap;
                                 overflow: hidden;
                                 text-overflow: ellipsis;
                              }
                           }
                        }
                     }
                  }
               }
               .authentication {
                  width: 100%;
                  box-sizing: border-box;
                  margin-bottom: 24px;
                  background: #fff;
                  padding: 24px;
                  border-radius: 2px;

                  .title {
                     font-size: 16px;
                     font-weight: 600;
                     color: #222226;
                     margin-bottom: 10 px;
                  }
                  .authen-item {
                     display: flex;
                     justify-content: space-between;
                     height: 40px;
                     align-items: center;
                     width: 180px;
                     p {
                        display: flex;
                        align-items: center;
                        img {
                           width: 20px;
                           height: 20px;
                        }
                        span {
                           font-size: 14px;
                           font-weight: 400;
                           color: #222226;
                           margin-left: 8px;
                        }
                     }
                     img {
                        width: 20px;
                        height: 20px;
                     }
                  }
               }
               .so-questionnaire {
                  padding: 16px;
                  width: 100%;
                  box-sizing: border-box;
                  background-color: #fff;
                  z-index: 11 !important;
                  border-radius: 2px;
                  .sq-main {
                     .sq-hd {
                        color: #222226;
                        font-size: 15px;
                        text-align: center;
                        font-weight: 700;
                     }
                     .sq-bd {
                        margin-top: 16px;
                        ul {
                           display: flex;
                           align-items: center;
                           justify-content: center;
                           li {
                              width: 17.6%;
                              cursor: pointer;
                              text-align: center;
                              padding-right: 8px;
                              .icon {
                                 border-radius: 50%;
                                 background-size: 90%;
                                 margin: 0 auto;
                                 position: relative;
                                 display: block;
                                 width: 100%;
                                 max-width: 46px;
                                 padding-top: 100%;
                                 background-position: 50%;
                              }
                              .w {
                                 background-image: url(../image/强烈不推荐.png);
                                 background-repeat: no-repeat;
                              }
                              .a {
                                 background-image: url(../image/不推荐.png);
                                 background-repeat: no-repeat;
                              }
                              .b {
                                 background-image: url(../image/无所谓.png);
                                 background-repeat: no-repeat;
                              }
                              .c {
                                 background-image: url(../image/推荐.png);
                                 background-repeat: no-repeat;
                              }
                              .d {
                                 background-image: url(../image/强烈推荐.png);
                                 background-repeat: no-repeat;
                              }
                           }
                        }
                     }
                  }
               }
            }
         }
         .content_management_box {
            flex: 1;
            padding: 24px 24px;
            position: relative;
            border-radius: 2px;
            margin-right: 56px;
            background-color: #fff;
            min-height: 100%;
            .header {
               height: 60px;
               width: 100%;
               padding: 0px;
               .el-menu--horizontal {
                  border: none;
                  display: flex;
                  padding-top: 10px;
                  .el-menu-item {
                     height: 50px;
                     line-height: 35px;
                     color: #555666;
                     font-size: 16px;
                     border: none;
                     padding: 0 20px;
                     list-style: none;
                     cursor: pointer;
                     position: relative;
                     &.active {
                        font-weight: 600;
                        .wq {
                           display: block;
                        }
                     }
                     a {
                        color: inherit;
                        .wq {
                           width: 24px;
                           height: 1px;
                           display: none;
                           margin: 8px auto 0;
                           border-bottom: 2px solid #222226;
                           // visibility: hidden;
                        }
                     }
                  }
               }
            }
            .container {
               display: flex;
               margin: 0 auto;
               list-style: none;
               // background: #771191;
               .view-container-blog {
                  width: 100%;
                  text-align: left;
                  .article_manage_mp {
                     padding: 24px 24px;
                     text-align: start;
                     .main-nav-tabs {
                        position: relative;
                        display: flex;
                        align-items: center;
                        height: 30px;
                        margin-top: -15px;
                        .artile-status {
                           font-size: 14px;
                           color: #999aaa;
                           line-height: 20px;
                           height: 30px;
                           margin-right: 24px;
                        }
                        .nav {
                           display: flex;
                           flex-wrap: wrap;
                           padding-left: 0;
                           margin-bottom: 0;
                           list-style: none;
                           color: #555666;
                           .nav-item {
                              color: #999;
                              margin-right: 24px;
                              font-size: 14px;
                              padding-bottom: 10px;
                              cursor: pointer;
                              input {
                                 position: absolute;
                                 opacity: 0;
                                 cursor: pointer;
                              }
                              label {
                                 cursor: pointer;
                              }
                              &:hover {
                                 color: #222226;
                              }
                              &.active {
                                 color: #222226;
                                 font-weight: 500;
                              }
                           }
                        }
                     }
                     .main-search-box {
                        padding: 8px;
                        padding-left: 0;
                        font-size: 14px;
                        margin-left: auto;
                        .el-select {
                           line-height: 32px;
                           display: inline-block;
                           position: relative;
                           &.open {
                              .el-select-dropdown {
                                 display: flex;
                              }
                              .ic3 {
                                 transform: rotate(180deg);
                              }
                           }
                           .el-input {
                              line-height: 32px;
                              display: block;
                              position: relative;
                              font-size: 14px;
                              display: inline-block;
                              width: 100%;
                              .el-input__inner {
                                 background-image: none;
                                 border-radius: 4px;
                                 border: 1px solid #dcdfe6;
                                 box-sizing: border-box;
                                 color: #606266;
                                 display: inline-block;
                                 font-size: inherit;
                                 height: 32px;
                                 line-height: 32px;
                                 outline: none;
                                 padding: 0 15px;
                                 cursor: pointer;
                                 width: 100%;
                                 &:hover {
                                    border-color: #c0c4cc;
                                 }
                                 &:focus {
                                    border-color: #3399ea;
                                 }
                              }
                              .el-input__suffix {
                                 position: absolute;
                                 width: 25px;
                                 height: 100%;
                                 right: 5px;
                                 top: 0;
                                 text-align: center;
                                 color: #c0c4cc;
                                 -webkit-transition: all 0.3s;
                                 transition: all 0.3s;
                                 pointer-events: none;
                                 .el-input__suffix-inner {
                                    pointer-events: all;
                                 }
                              }
                              .ic3 {
                                 font-size: 12px;
                                 transition: 0.3s;
                                 text-align: center;
                                 &::after {
                                    content: "";
                                 }
                              }
                           }
                           .el-select-dropdown {
                              display: none;
                              max-height: 280px;
                              overflow-y: auto;
                              min-width: 100%;
                              background-color: #fff;
                              border: 1px solid #e4e7ed;
                              box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                              box-sizing: border-box;
                              position: absolute;
                              top: 40px;
                              left: 0;
                              border-radius: 5px;
                              justify-content: center;
                              padding: 8px 16px;
                              box-sizing: border-box;
                              &::-webkit-scrollbar {
                                 width: 0;
                              }
                              ul {
                                 width: 100%;
                                 li {
                                    white-space: nowrap;
                                    cursor: pointer;
                                    padding: 0 16px;
                                    margin: 6px 0;
                                    &:hover {
                                       background-color: #f5f7fa;
                                    }
                                 }
                              }
                           }
                        }
                        .main-search-year {
                           width: 80px;
                           margin-right: 8px;
                        }
                        .main-search-month {
                           width: 78px;
                           margin-right: 24px;
                        }
                        .main-search-articleType {
                           width: 110px;
                           margin-right: 8px;
                        }
                        .main-search-classifyColumn {
                           width: 214px;
                           margin-right: 24px;
                        }
                        .main-search-keywords {
                           width: 228px;
                           margin-right: 24px;
                        }
                        .el-input {
                           line-height: 32px;
                           position: relative;
                           font-size: 14px;
                           display: inline-block;
                           .el-input_text__inner {
                              background-color: #fff;
                              background-image: none;
                              border-radius: 4px;
                              border: 1px solid #dcdfe6;
                              box-sizing: border-box;
                              color: #606266;
                              display: inline-block;
                              font-size: inherit;
                              height: 32px;
                              line-height: 32px;
                              outline: none;
                              padding: 0 15px;
                              width: 100%;
                              &:hover {
                                 border-color: #c0c4cc;
                              }
                           }
                        }
                        .main-search-searchButton {
                           padding: 0 24px;
                           border: 1px solid #fc5531;
                           border-color: #fc5531;
                           font-size: 14px;
                           color: #fc5531;
                           -webkit-transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
                           transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
                           line-height: 32px !important;
                           height: 32px !important;
                           border-radius: 4px;
                           min-height: unset;
                           vertical-align: -1px;
                           &:hover {
                              background-color: #fc5531;
                              color: #fff;
                           }
                        }
                        .el-button {
                           display: inline-block;
                           white-space: nowrap;
                           cursor: pointer;
                           background: #fff;
                           text-align: center;
                           box-sizing: border-box;
                           outline: none;
                           margin: 0;
                           transition: 0.1s;
                           font-weight: 500;
                        }
                     }
                  }
               }
            }
            .article_list {
               .article_ul {
                  li {
                     display: flex;
                     border-bottom: 1px dotted #ddd;
                     padding: 16px 0;
                     .cover {
                        width: 160px;
                        height: 90px;
                     }
                     .info {
                        display: flex;
                        flex-direction: column;
                        flex: 1;
                        color: #555666;
                        margin-left: 16px;
                        .top {
                           height: 36px;
                           display: flex;
                           .title {
                              flex: 1;
                              font-weight: 500;
                           }
                           .date {
                              font-size: 14px;
                              color: #999;
                           }
                        }
                        .tag_box {
                           flex: 1;
                           min-height: 36px;
                           .tag {
                              width: 32px;
                              border-radius: 2px;
                              font-size: 12px;
                              padding: 1px 4px;
                           }
                           .state_0 {
                              color: #999aaa;
                              background-color: #f5f5f5;
                              &::after {
                                 content: "草稿";
                              }
                           }
                           .type_0 {
                              color: #fc5531;
                              background-color: #fff5f2;
                              &::after {
                                 content: "原创";
                              }
                           }
                           .type_1 {
                              color: #6b5;
                              background-color: rgba(103,187,85,.1);
                              &::after {
                                 content: "转载";
                              }
                           }
                           .type_2 {
                              color: #267dcc;
                              background-color: rgba(39,124,204,.1);
                              &::after {
                                 content: "翻译";
                              }
                           }
                        }
                        .bom {
                           font-size: 14px;
                           display: flex;
                           .info_num {
                              color: #999;
                              flex: 1;
                           }
                           .operation {
                              a {
                                 margin: 0 8px;
                              }
                           }
                        }
                     }
                  }
               }
            }
         }
      }
   }
   .active {
      font-size: 16px;
   }
   .el-menu--horizontal {
      border: none;
   }
   .fr {
      float: right;
   }
   .dwe {
      display: block !important;
   }
}
#right-menu {
   position: fixed;
   bottom: 160px;
   right: 24px;
   width: 44px;
   z-index: 1999;
   .csdn-side-toolbar {
      widows: 100%;
      height: 100%;
      .option-box {
         cursor: pointer;
         background-color: #fff;
         border-radius: 50%;
         position: relative;
         width: 44px;
         height: 44px;
         display: block;
         display: flex;
         justify-content: center;
         align-items: center;
         margin: 6px;
         overflow: hidden;
         img {
            position: absolute;
            width: 60%;
            height: 60%;
         }
         div,
         span {
            top: 0;
            left: 0;
            position: absolute;
            display: none;
            background-color: #fff;
         }
         span {
            align-items: center;
            justify-content: center;
            font-size: 12px;
            padding: 6px;
            box-sizing: border-box;
            text-align: center;
            width: 100%;
            height: 100%;
            color: #999aaa;
         }
         &:hover span {
            display: flex;
         }
      }
   }
}

.home-vipserver-box-blank {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding-bottom: 24px;
   .home-blank-icon-box {
      display: inline-block;
      background-image: url(../image/发送背景.png);
      background-size: 100% auto;
      background-repeat: no-repeat;
      width: 200px;
      height: 200px;
   }
   .home-un-pass-vip {
      font-size: 14px;
      color: #999aaa;
      text-align: center;
      margin-bottom: 8px;
   }
   .home-now-pass-vip {
      color: #3399ea;
      font-size: 14px;
      text-align: center;
      cursor: pointer;
   }
}
